<template>
    <!-- <h3>个人中心</h3> -->
    <div class="header">
        <van-icon @click="jumpTo" name="arrow-left" />
    </div>
    <div class="my">
        <div class="user-image">
            <img v-if="userInfo.imgUrl" :src="userInfo.imgUrl" alt="">
        </div>
        <div class="user-info">
            <p>{{ userInfo.nickName }}</p>
            <p>注册时间：{{ userInfo.createAt }}</p>
            <p>账号: {{ userInfo.account }}</p>

        </div>
        <div class="user-list">
            <ul>
                <router-link to="/edit">
                    <li>
                        <van-icon name="photo-o" />
                        个人资料
                    </li>
                </router-link>
                <li>
                    <van-icon name="label-o" />
                    我的成绩
                </li>


                <li>
                    <van-icon name="phone-o" />
                    联系我们
                </li>

                <router-link to="/secure">
                    <li>
                        <van-icon name="shield-o" />
                        账号安全
                    </li>
                </router-link>
            </ul>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import request from '@/api/request'
import { reactive, ref } from 'vue'
import{}

const $router = useRouter()
// 获取用户临时身份
let token = localStorage.getItem("AUTOTOKEN")

// 定义用户数据
let userInfo = reactive({
    nickName: "",
    imgUrl: "",
    account: "",
    createAt: ""
})

// 定义用户中心初始化函数
const initUser = async (token: string) => {
    let isLogin = false;
    await request.userLogged({ token })
        .then(
            content => {
                // console.log(content)
                let { code } = content
                if (code == 200) {
                    isLogin = true;
                }
            }
        )

    if (isLogin) {
        // 获取用户信息
        await request.userInfo({ token })
            .then(
                content => {
                    // console.log(content);
                    let { code, result } = content;
                    if (code == 200) {
                        if (result.length == 1) {
                            // 解构赋值
                            let [user] = result;
                            userInfo.nickName = user.nickName
                            userInfo.account = user.account
                            userInfo.imgUrl = request.host + user.imgUrl;//头像
                            localStorage.setItem("USERIMG", userInfo.imgUrl);
                            let date = new Date();
                            date.setTime(user.createAt);
                            userInfo.createAt = date.toLocaleDateString() + " " + (date.toLocaleTimeString())
                        }
                    }
                }
            )
    }
}


if (token) {
    // 初始化
    initUser(token)
}
else {
    $router.replace({ path: '/login' })
}

const jumpTo = () => {
    $router.push({ path: '/home/category' })
}

</script>

<style lang="less">
@import '../../static/less/variable.less';

.header {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #f0f0f0;
    padding: @pad;
}

.my {
    padding: @pad;

    .user-image {
        width: 120px;
        height: 120px;
        margin: 20px auto;
        border: 1px solid #ccc;
        background-color: #f0f0f0;
        border-radius: 50%;
        overflow: hidden;

        img {
            width: 120px;
            height: 120px;
        }
    }

    .user-info {
        p {
            text-align: center;
            font-size: 18px;
            margin-bottom: 10px;
        }

        p:nth-child(2) {
            color: #ccc;
            font-size: 16px;
        }
    }

    .user-list {
        margin-top: 40px;

        ul {
            li {
                font-size: 18px;
                height: 44px;
                line-height: 44px;
                border-bottom: 1px solid #f0f0f0;
            }
        }
    }
}
</style>
